//1. 导入 useState 函数
import React, {useState} from 'react'
// import {useState} from 'react';

export default function StateCom() {
  //2. 在函数式组件中调用 useState 函数
  // count 变量用来接收状态的值
  // setCount 用来接收更新状态的函数
  let [count, setCount] = useState(0); //参数是状态的默认值『初始值』
  let [count2, setCount2] = useState(100); //参数是状态的默认值『初始值』

  console.log('run....');
  return (
    <div>
      {/* 3. 使用状态 */}
      <h2>{count}</h2>
      <hr />
      <button onClick={() => {
        // 4. 更新状态
        setCount(count + 1); //设置新值
      }}>新增</button>
      <button onClick={() => {
        setCount(count - 1)
      }}>减小</button>
      <hr />
      <button onClick={() => {
        //setCount 可以接收函数类型的参数, 该函数在运行时接受当前的状态值, 然后使用函数的返回值更新内部的状态
        setCount((count) => {
          return count + 1;
        })
      }}>新增</button>
      <button onClick={() => setCount(count => count - 1)}>减小</button>
      <hr />
      <button onClick={() => {
        setCount(0);
      }}>新值与旧值相等</button>

      <hr />
      <h2>{count2}</h2>
      <button onClick={() => {
        //修改 count
        setCount(count + 1);
        //修改 count2
        setCount2(count2 + 1);
      }}>改变两个状态</button>

      <hr />
      <h2>{count}</h2>
      <button onClick={() => {
        //更新状态
        setCount(count + 1);
        //输出当前的状态值
        console.log(count);
      }}>更新完成后, 传值形式不能立刻获得最新值</button>
      <button onClick={() => {
        //直接更新状态
        setCount(100);
        //更新状态
        setCount(count => {
          console.log(count);
        });
      }}>回调函数形式的参数, 可以得到最新的状态值</button>
    </div>
  )
}

// let a = a => a => a => a;


